<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { FormRules } from 'wot-design-uni/components/wd-form/types'
import { isArray } from 'wot-design-uni/components/common/util'


definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '绑定新卡' },
  { title: '解绑迁移' }
])

function handleChange(event: any) {
  console.log(event)
  tab.value = event.index;
}


const model = reactive<{
  bankNo: string | number
  verifyCode: string
  bindPerson: string
  name: string
  cardType: string[]
  cardNo: string
  phone: string
  fileList: Record<string, string>[]
  read: boolean
}>({
  bankNo: '',
  verifyCode: '',
  bindPerson: '1',
  name: '',
  cardType: ['1'],
  cardNo: '',
  phone: '',
  fileList: [],
  read: true,
})

const rules: FormRules = {
  bankNo: [
    {
      required: true,
      pattern: /\d{6}/,
      message: '卡号6个字符以上',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入卡号')
        }
      }
    }
  ],
  verifyCode: [
    {
      required: true,
      message: '请输入激活码'
    }
  ],
  bindPerson: [
    {
      required: true,
      message: '请选择绑定人'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入姓名'
    }
  ],
  cardNo: [
    {
      required: true,
      message: '请输入证件号码'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入电话'
    }
  ],
  cardType: [
    {
      required: true,
      message: '请选择证件类型'
    }
  ],
  fileList: [
    {
      required: true,
      message: '请选择头像上传',
      validator: (value) => {
        if (isArray(value) && value.length) {
          return Promise.resolve()
        } else {
          return Promise.reject()
        }
      }
    }
  ]
  
  
}

// 推荐改名为 formRef，初始为 null，并声明 any（或具体类型）
const formRef = ref<any>(null)

function handleSubmit() {
  formRef.value
    .validate()
    .then(({ valid, errors }) => {
      console.log(valid) // true 验证成功
      console.log(errors)
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

function handleFileChange({ fileList }) {
  model.fileList = fileList
}

const platformList = ref<any>([
  {
    value: '1',
    label: '居民身份证'
  }
])

function jump(url: string) {
  uni.navigateTo({ url });
}

const reservedIdx = ref<number>(0)
function sel_sererdIdx(idx: number) {
  reservedIdx.value = idx
}

let selUserIdx = ref<number>(0)
function sel_uesr_idx(index: number) {
  selUserIdx.value = index
}
</script>

<template>
  <view class="scenic-container">
    <view class="scenic-bg"></view>
    <wd-navbar left-text="预约信息" left-arrow @click-left="handleClickLeft" custom-class="wd-color"
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <view class="goodlist">
      <view class="cantent">
        <view class="cantent-title">预约须知</view>

        <view class="cantent-ul flex">
          <view class="cantent-ul-tit">权益内容</view>
          <view class="cantent-ul-con">山东融创王题乐园旗下"济南融创乐园”、"济南毂创沟世界““济南融创水世界”以及"青岛融创乐园”青岛融创水世界"共五个景区，好客山东一码通会员仅享受其中一个景区免费入园权益(5选1)，会员有效期内着已核销“任意一家景区，其他融创景区均不享受免费入园的权益。具体游玩权益详见景区产品介绍。</view>
        </view>
        <view class="cantent-ul flex">
          <view class="cantent-ul-tit">营业时间</view>
          <view class="cantent-ul-con cantent-color-aaa">因涉及节假日游玩开放时间稍有变动，请具体以窗口公示为主</view>
        </view>
        <view class="cantent-ul flex">
          <view class="cantent-ul-tit">权益内容</view>
          <view class="cantent-ul-con cantent-color-aaa">融创乐园成人欢乐套票1张</view>
        </view>
        <view class="cantent-ul flex">
          <view class="cantent-ul-tit">使用说明</view>
          <view class="cantent-ul-con cantent-color-aaa">融创乐园设备畅玩，适用于1位成人携带1位1.2米(不含)以下的儿童<br/>
              融创乐园可免票入园，欢乐套票包含14项设备畅玩，具体项目如下:崂山飞龙、激流勇进、碰碰车、旋转木马、</view>
        </view>
      </view>

      <view class="cantent">
        <view class="cantent-title">游玩时间</view>
        <view class="reserved flex">
          <view class="reserved-ul flex">
            <view class="reserved-li" :class="{'bg-color-red': reservedIdx==0}" @click="sel_sererdIdx(0)">
              <view class="reserved-li-tit" :class="{'text-color-white': reservedIdx==0}">订今日</view>
              <view class="reserved-li-count" :class="{'text-color-white': reservedIdx==0}">剩余999</view>
            </view>
            <view class="reserved-li" :class="{'bg-color-red': reservedIdx==1}" @click="sel_sererdIdx(1)">
              <view class="reserved-li-tit" :class="{'text-color-white': reservedIdx==1}">订明日</view>
              <view class="reserved-li-count" :class="{'text-color-white': reservedIdx==1}">剩余999</view>
            </view>
            <view class="reserved-li" :class="{'bg-color-red': reservedIdx==2}" @click="sel_sererdIdx(2)">
              <view class="reserved-li-tit" :class="{'text-color-white': reservedIdx==2}">订8月5日</view>
              <view class="reserved-li-count" :class="{'text-color-white': reservedIdx==2}">剩余999</view>
            </view>
          </view>
          <view class="reserved-ol">更多日期<uni-icons type="right" size="14" class="reserved-ol-icon" color="#aaa"></uni-icons></view>
        </view>
      </view>

      <view class="cantent">
        <view class="cantent-title">一码通选择</view>
        <view class="onecard">同一张卡在出游当天只可预约一个入园名额，如游玩人数超过1人，则需要选择多张卡</view>
        <view class="onecard-contain flex">
          <view class="onecard-ul flex">
            <view class="onecard-user" :class="{'onecard-color': selUserIdx===0}" @click="sel_uesr_idx(0)">张三</view>
            <view class="onecard-user" :class="{'onecard-color': selUserIdx===1}" @click="sel_uesr_idx(1)">李四</view>
          </view>
          <view class="onecard-ol">新增<uni-icons type="right" size="14" class="onecard-contain-icon" color="#333"></uni-icons></view>
        </view>
      </view>

      <view style="height: 20rpx;"></view>
      <view style="height: 80rpx;"></view>

      <view class="oprate flex">
        <view class="oprate-ul flex">
          <view class="oprate-txt">已选择 {{1}} 人</view>
          <wd-button type="error" custom-class="oprate-btn" size="small">立即预约</wd-button>
        </view>
      </view>
    </view>

    <wd-message-box />
    <wd-toast />
  </view>
</template>

<style lang="scss" scoped>
.scenic-container {
  position: relative;
  & .scenic-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: linear-gradient(to bottom, #BF9763, #ffffff);
    height: 500rpx;
    width: 750rpx;
  }
  
  & .goodlist {
    & .cantent {
      width: 710rpx;
      margin: 20rpx 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx 20rpx 20rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      box-shadow:
        0 2px 4px rgba(0,0,0,0.06),
        0 4px 8px rgba(0,0,0,0.08);
      & .cantent-title {
        font-size: 32rpx;
        font-weight: 700;
        line-height: 60rpx;
      }

      & .cantent-ul {
        margin: 20rpx 0;
        & .cantent-ul-tit {
          flex-basis: 140rpx;
          font-size: 30rpx;
          font-weight: 700;

        }
        & .cantent-ul-con {
          color: #e60012;
          font-size: 28rpx;
          flex: 1;
        }
        & .cantent-color-aaa {
          color: #aaa;
        }
      }

      & .reserved {
        margin: 20rpx 0;
        justify-content: space-between;
        & .reserved-ul {
          & .bg-color-red {
            background-color: #FF441D!important;
          }
          & .text-color-white {
            color: #fff!important;
          }
          & .reserved-li {
            background: rgba(167,167,167,0.2);
            padding: 20rpx;
            margin-right: 20rpx;
            border-radius: 15rpx;
            & .reserved-li-tit {
              font-size: 28rpx;
              font-weight: 700;
              text-align: center;
              color: #333;
              line-height: 50rpx;
            }
            & .reserved-li-count {
              font-size: 24rpx;
              text-align: center;
              color: #aaa;
            }
          }
        }
        & .reserved-ol {
            background: rgba(167,167,167,0.2);
            padding: 20rpx;
            border-radius: 15rpx;
            font-size: 28rpx;
            font-weight: 700;
            text-align: center;
            color: #333;
            line-height: 80rpx;
            & .reserved-ol-icon {
              margin-left: 1rpx;
            }
        }
      }
      & .onecard {
        font-size: 26rpx;
        color: #EC0501;
      }
      & .onecard-contain {
        justify-content: space-between;
        margin: 20rpx 0;
        & .onecard-ul {

          & .onecard-user {
            line-height: 70rpx;
            width: 140rpx;
            text-align: center;
            background: rgba(167,167,167,0.2);
            border-radius: 6rpx;
            // border: 1rpx solid #A7A7A7;
            color: rgba($color: #302922, $alpha: 0.7);
            font-size: 26rpx;
            margin-right: 10rpx;
          }
        }
        & .onecard-ol {
          line-height: 70rpx;
            width: 140rpx;
            text-align: center;
            border-radius: 6rpx;
            // border: 1rpx solid #A7A7A7;
            color: rgba($color: #000, $alpha: 0.9);
            font-size: 26rpx;
            margin-right: 10rpx;
        }
        & .onecard-color {
          color: #333333!important;
          border: 1rpx dashed #e60012;
        }
        & .onecard-contain-icon {
          margin-left: 1rpx;
          margin-top: 10rpx;
        }
      }


// <view class="onecard">同一张卡在出游当天只可预约一个入园名额，如游玩人数超过1人，则需要选择多张卡</view>
//         <view class="onecard-contain">
//           <view class="onecard-ul">
//             <view class="onecard-user">张三</view>
//             <view class="onecard-user">李四</view>
//           </view>
//           <view class="onecard-ol">新增</view>
//         </view>
      
    }
    & .oprate {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 80rpx;
      width: 750rpx;
      flex-direction: row-reverse;
      & .oprate-ul {
        & .oprate-txt {
          font-size: 28rpx;
          line-height: 80rpx;
          color: #FD401E;
          margin-right: 40rpx;
        }
        :deep(.oprate-btn) {
          margin-top: 15rpx;
          margin-right: 40rpx;
        }
      }
    }
  }

  :deep() {
    .wd-navbar__text  {
      color: #fff;
    }
    .wd-navbar__arrow {
      color: #fff;
    }
    .wd-tabs, .wd-tabs__nav {
      background: transparent !important;
    }
  }
}

</style>
